*{
  margin: 0;
  padding: 0;
}

$wh:width;
$he:height;
$bg:background-color;
$ml:margin-left;
$td:text-decoration;
#box{
  #{$wh}:100%;
  //position: ;
}
#header{
  position: relative;
  #{$wh}:1366px;
  #{$he}:30px;
  #{$bg}:gainsboro;
  #city{
    width: 500px;
    display:block;
    float: left;
    #{$ml}:100px;
    line-height: 30px;
    a{
      #{$td}:none;
    }
  }
  #serve{
    width:550px;
    display:block;
    float:right;
    line-height: 30px;
    a{
      #{$td}:none;
    }
    #slec{
      #{$bg}:gainsboro;
    }
  }
}
#img{
  margin-top:34px;
}
#text{

}
#citypage{
    width:400px;
    height:250px;
    position:absolute ;
  left:100px;
   top:30px;
  display: none;
  z-index:4;
  background-color: white;
    border: 1px solid gray;
    button{
      position: relative;
      top: -32px;
      left: 385px;
    }
}
//登录
#login{
  width:500px;
  height: 350px;
  background-color:white;
  position: fixed;
  left: 400px;
  top:150px;
  z-index:30;
  display: none;
    #dl{
      position: relative;
      left: 470px;
      top:-45px;
    }
    span{
      font-size: 20px;
      display: inline-block;
      margin-left: 50px;
    }
    #log{
      width: 300px;
      height: 50px;
      margin-left:10px;
    }
  #kong{
    width: 280px;
    height: 20px;
   margin:0 auto;
    color: dodgerblue;
  }
  #pwd{
    width: 300px;
    height: 50px;
    margin-left:10px;

  }
  #zd{
    margin-left: 110px;
  }
  #now{
    width: 300px;
    height: 50px;
    margin-left:110px;
    background-color:#4BBA1E;
    color: white;
    font-size: 20px;
  }
  p{
    margin-left:160px;
    font-size:15px;
  }
}
//注册
#zhuce{
  width:500px;
  height: 350px;
  background-color:white;
  position: fixed;
  left: 400px;
  top:150px;
  z-index:15;
  display: none;
  #d {
    position: relative;
    left: 470px;
    top: -45px;
  }
    span{
      font-size: 20px;
      display: inline-block;
      margin-left: 30px;
    }
    #loge{
      width: 295px;
      height:25px;
      margin-left:10px;
    }
  #tianjia{
    width: 280px;
    height: 20px;
    margin:0 auto;
    color: dodgerblue;
  }
    #yzm{
      width: 190px;
      height: 25px;
      margin-left:10px;
    }
    #yz{
      width:100px;
      height:25px;
      background-color: white;
      border: 1px solid darkgrey;
      position: absolute;
      left:275px;
      top:144px;
    }
    #chg{
      position: relative;
      left:110px;
      top:2px;
    }
    #xy{
      width: 190px;
      height: 25px;
      margin-left:10px;
    }
    #psw{
      width: 295px;
      height:25px;
      margin-left:10px;
    }
    #zc{
      width: 300px;
      height:35px;
      margin-left:110px;
      background-color:#4BBA1E;
      color: white;
      font-size: 20px;
    }
    p{
      margin-left:160px;
      //font-size:20px;

  }
}
#bg{
  width: 100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  //opacity:0.1;
  z-index: 10;
  position: fixed;
  left: 0;
  top:0;
  display: none;

}
#banner{
  width: 1200px;
  margin: auto;
  //#{$bg}:gainsboro;
  //#{$he}:1270px;
  //background-color: ;
}
#logo{
  #{$wh}:1200px;
  #{$bg}:white;
  #{$he}:74px;
  #img{
    display:inline-block;
    #{$wh}:500px;
    #{$he}:73px;
    position: relative;
    top: -34px;
    left: 0;
  }
  #text{
    display: inline-block;
    #{$wh}:700px;
    position:absolute;
    top: 30px;
    left:700px;
    span{
      display: block;
      #{$wh}:100px;
      float: left;
      line-height: 74px;
      a{
        #{$td}:none;
      }
    }
  }
}
#autoPlay{
  #{$wh}:100%;
  #{$he}:340px;
  position: relative;
  #pone{
    #{$wh}:200px;
    #{$he}:340px;
    #{$bg}:#21214B;
    //background-color:rgba(43,43,83);
    opacity: 0.8;
    color: white;
    position: absolute;
    z-index:2;
    left: 0;
    top:0;
    ul{
      #{$wh}:200px;
      #{$he}:340px;
      li{
        //#{$wh}:200px;
        #{$he}:112px;
        //display: block;
        list-style: none;
        text-decoration: none;
        border-bottom: 1px solid white;
        line-height: 112px;
        a{
          text-decoration: none;
          font-size: 20px;
          color:gainsboro;
        }
      }
    }
  }
}
#pange{
  #{$wh}:1200px;
  #{$he}:116px;
  clear: both;
    div{
      width: 295px;
      height:150px;
      float: left;
      margin-left:4px;
        img{
          width: 295px;
          height: 150px;
        }
    }
}

#shouji{
  #{$wh}:1200px;
  #{$he}:350px;
  clear: both;
  #top{
    width: 1200px;
    height:50px;
    //float: left;
    margin-left:4px;
      .a{
        display:inline-block;
        font-size: 25px;
        float: left;
        line-height: 50px;
      }
        .b{
          float:right;
          line-height: 50px;
          //margin-left: 800px;
          display:block;
        }
  }

}
#xiaomi{
  width: 1200px;
  height: 300px;
  div{
    width:198px;
    height: 300px;
    float: left;
    margin-left:2px;
    background-color: white;
    .tu{
      width:100px;
      height:150px;
      margin-left: 50px;
      margin-top: 50px;
    }
  }
  .one{
    width:198px;
    height: 300px;
  }
  p{
   font-size: 20px;
    margin-top: 10px;
    text-align: center;
  }
}

#teel{
  #{$wh}:1200px;
  #{$he}:350px;
  clear: both;
  #tp{
    width: 1200px;
    height:50px;
    //float: left;
    margin-left:4px;
    .a{
      display:inline-block;
      font-size: 25px;
      float: left;
      line-height: 50px;
    }
    .b{
      float:right;
      line-height: 50px;
      //margin-left: 800px;
      display:block;
    }
  }

}

#oppo{
  width: 1200px;
  height: 300px;
  clear: both;
  div{
    width:198px;
    height: 300px;
    float: left;
    margin-left:2px;
    background-color: white;
    .tu2{
      width:100px;
      height:150px;
      margin-left: 50px;
      margin-top: 50px;
    }
  }
  .two{
    width:198px;
    height: 300px;
  }
  p{
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
    color: gray;
  }
  span{
    text-align: center;
    color: red;
    display: block;
  }
}
#goshop{
  width: 1200px;
  height:50px;
 line-height:50px;
  background-color: yellow;
}
#food{
  clear: both;
  width: 1200px;
  #xuanqu{
    width: 100%;
    height: 70px;
    //background-color: yellow;
      #one{
        width: 200px;
        height: 40px;
        border: 1px solid green;
        display: inline-block;
        float: left;
            #ct{
              margin-left: 50px;
              margin-top: 10px;
              border: none;
            }
      }
    #two{
      width: 200px;
      height: 40px;
      border: 1px solid green;
      display: inline-block;
      margin-left: 20px;
      float: left;
      #qx{
        margin-left: 50px;
        margin-top: 10px;
        border: none;
      }
    }
    #tree{
      width:380px;
      height: 40px;
      margin-left: 20px;
      //border: 1px solid green;
      display: inline-block;
      float: left;
          input{
            width:280px;
            height: 40px;
            border: 1px solid green;
            display: inline-block;
          }
          #suo{
            width:98px;
            height: 40px;
            background-color: green;
            display: inline-block;
            color: white;
            font-size: 20px;
          }
    }
  }
}
#hov{
  width: 820px;
  height: 40px;
  border: 1px solid grey;
  background-color: gainsboro;
  //float: left;
  span{
    width: 150px;
    height:38px ;
    float: left;
    border: gainsboro;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    //background-color: white;
  }
  a{
    text-decoration:none;
    color: black;
  }
  a:hover{
    width: 148px;
    height:38px ;
    display: inline-block;
    background-color: white;

  }
  input{
    margin-top:12px;
    margin-left: 50px;
  }
  #map{
    width:100px;
    height:30px;
    background-color: white;
    border: 1px solid grey;
    float: right;
    margin-right:20px;
    margin-top: 5px;
    line-height: 30px;
    font-size: 15px;
    img{
      margin-left:5px;
    }
  }
}
#diaoqu {
  width: 820px;
  .biao {
    width: 820px;
    height: 150px;
    border-bottom: 1px solid gainsboro;
    img {
      width: 110px;
      height: 110px;
      display: inline-block;
      float: left;
      margin-top: 20px;
    }
    .shop_name {
      font-size: 15px;
      //margin-left: 50px;
    }
    .main {
      font-size: 15px;
      //margin-left: 50px;
      color: black;
    }
    .addr {
      color: green;
      overflow: hidden;
      font-size: 15px;
      margin-top: 5px;
    }
    .mobile {
      font-size: 15px;
      margin-left: 20px;
      margin-top: 5px;
      color: blue;
    }
    .count {
      font-size: 15px;
      margin-left: 50px;
      color: red;
    }
    .story {
      width: 200px;
      height: 50px;
      display: inline-block;
      border: 1px solid green;
      font-size: 20px;
      line-height: 50px;
      text-align: center;
      margin-left: 500px;
      a{
        text-decoration: none;
        color: green;
      }
    }
  }
}

.biao:hover {
  background-color:gainsboro;
}
#ping{
  width: 300px;
  height:800px;
  position: relative;
  left:850px;
  top: -795px;
  #tou {
    width: 100%;
    height: 40px;
    font-size: 25px;
    background-color: gainsboro;
    line-height: 40px;
    text-align: center;
  }
    .kuai{
      width: 100%;
      height: 100px;
      border: 1px solid gainsboro;
      div {
        display: inline-block;
      }
      .lt{
        width:130px;
        height:100px;
        float: left;
        //background-color: red;
        display: block;
          .tu1{
            margin-top:25px;
            margin-left:15px;
            vertical-align: middle;
          }
        .tu2{
          display: inline-block;
          margin-top:20px;
          margin-left: 20px;
          vertical-align: middle;
        }
      }
      .rt{
        //background-color: yellow;
        width: 170px;
        height: 100px;
        float: right;
        display: block;
        p{
          color: grey;
          margin-top:25px;
          a{
            text-decoration: none;
            color: black;
          }
        }
      }
    }
  }
